<template>
  <div style="margin-bottom: 24px">
    <a-grid :cols="8" :colGap="12" :rowGap="16" class="grid-color">
      <a-grid-item class="color-item" v-for="color in themeColorList" :key="color" :style="{ backgroundColor: color }" @click="setColor(color)">
        <icon-check v-if="color === checkedColor" class="checked-color" />
      </a-grid-item>
    </a-grid>
    <a-button type="outline" long @click="moreColor()" style="margin-top: 10px">更多颜色</a-button>

    <ColorModal
      ref="colorRef"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  import ColorModal from './color-modal.vue';

  const colorRef = ref();
  const checkedColor = ref('#007AFF');
  const themeColorList = [
    '#1890ff',
    '#409EFF',
    '#2d8cf0',
    '#007AFF',
    '#5ac8fa',
    '#5856D6',
    '#536dfe',
    '#9c27b0',
    '#AF52DE',
    '#0096c7',
    '#00C1D4',
    '#34C759',
    '#43a047',
    '#7cb342',
    '#c0ca33',
    '#78DEC7',
    '#e53935',
    '#d81b60',
    '#f4511e',
    '#fb8c00',
    '#ffb300',
    '#fdd835',
    '#6d4c41',
    '#546e7a',
  ];

  const setColor = (color: string) => {
    checkedColor.value = color;
  };
  const moreColor = () => {
    colorRef.value.fetchData();
  };
</script>

<style scoped lang="less">
  .grid-color .color-item {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
  }
  .color-item .checked-color {
    color: #ffffff;
  }
</style>